<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>社区志愿者系统</title>
   <!-- 引入样式 -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <!-- Favicon -->
   <link rel="shortcut icon" th:href="@{/images/favicon.ico}" />
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
   <!-- Typography CSS -->
   <link rel="stylesheet" th:href="@{/css/typography.css}">
   <!-- Style CSS -->
   <link rel="stylesheet" th:href="@{/css/style.css}">
   <!-- Responsive CSS -->
   <link rel="stylesheet" th:href="@{/css/responsive.css}">
   <!-- 引入element样式 -->
   <!--      <link rel="stylesheet" th:href="@{/css/https_unpkg.com_element-ui_lib_theme-chalk_index.css}">-->
</head>
<body>
<!-- loader Start -->
<div id="loading">
   <div id="loading-center">
   </div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
   <!-- Sidebar  引入公共列表-->
   <div th:include="public_user::list" class="iq-sidebar"></div>
   <!-- Responsive Breadcrumb End-->
   <!-- Page Content  -->
   <div id="content-page" class="content-page">
      <!-- TOP Nav Bar  引入公共头部-->
      <div th:include="public_user::top" class="iq-top-navbar"></div>
            <!-- TOP Nav Bar END -->
            <div class="container-fluid">
               <div class="row">
                  <div class="col-sm-12 col-lg-12">
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">志愿活动发布</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <div class="stepwizard mt-4">
                              <div class="stepwizard-row setup-panel">
                                 <div id="user" class="wizard-step active">
                                    <a href="#user-detail" class="active btn">
                                    <i class="ri-lock-unlock-line text-primary"></i><span>基础信息</span>
                                    </a>
                                 </div>
                                 <div id="document" class="wizard-step">
                                    <a href="#document-detail" class="btn btn-default disabled">
                                    <i class="ri-user-fill text-danger"></i><span>人员需求</span>
                                    </a>
                                 </div>
                                 <div id="bank" class="wizard-step">
                                    <a href="#bank-detail" class="btn btn-default disabled">
                                    <i class="ri-camera-fill text-success"></i><span>活动图片</span>
                                    </a>
                                 </div>
                                 <div id="confirm" class="wizard-step">
                                    <a href="#cpnfirm-data" class="btn btn-default disabled">
                                    <i class="ri-check-fill text-warning"></i><span>提交</span>
                                    </a>
                                 </div>
                              </div>
                           </div>
                           <form class="form" th:action="@{/vol/send}" method="post" enctype="multipart/form-data">
                              <div class="row setup-content" id="user-detail">
                                 <div class="col-sm-12">
                                    <div class="col-md-12 p-0">
                                       <h3 class="mb-4">基础信息:</h3>
                                       <div class="row">
                                          <div class="form-group col-md-6">
                                             <label class="control-label">类型:</label>
                                             <div class="col-sm-10">
                                                <select class="form-control-plaintext" name="typeId" id="type">
                                                   <option value="1">普通个人志愿服务</option>
                                                   <option value="2">社区团体志愿活动</option>
                                                </select>
                                             </div>
                                          </div>
                                          <div class="col-md-6 form-group">
                                             <label for="uname" class="control-label">活动名称: *</label>
                                             <input type="text" class="form-control" required="required" id="uname"  name="volName" placeholder="请输入活动名称">
                                          </div>

                                          <div class="col-md-12 mb-3 form-group">
                                             <label for="volMsg" class="control-label">活动描述: *</label>
                                             <textarea name="volMsg" class="form-control" id="volMsg" rows="5" required="required"></textarea>
                                          </div>
                                       </div>
                                       <div class="btn btn-primary nextBtn btn-lg pull-right">下一步</div>
                                    </div>
                                 </div>
                              </div>
                              <div class="row setup-content" id="document-detail">
                                 <div class="col-sm-12">
                                    <div class="col-md-12 p-0">
                                       <h3 class="mb-4">人数需求:</h3>
                                       <div class="row">
                                          <div class="col-md-6 form-group">
                                             <input type="text" class="form-control" required="required" id="fname" name="userNeed" placeholder="请输入人数">
                                          </div>

                                       </div>
                                       <div class="btn btn-primary nextBtn btn-lg pull-right" >下一步</div>
                                    </div>
                                 </div>
                              </div>
                              <div class="row setup-content" id="bank-detail">
                                 <div class="col-sm-12">
                                    <div class="col-md-12 p-0">
                                       <h3 class="mb-4">活动图片:</h3>
                                       <div class="row">
                                          <div class="col-md-6 form-group">
                                             <input type="file" onchange="showImg(this)" class="form-control" id="panno" name="pic">
                                          </div>
                                       </div>
                                       <div class="row">
                                          <img id="myImg" class="img-fluid" style="width: 800px;height: 500px"  src="../images/user/11.png" alt="profile-pic">
                                       </div>
                                       <div class="btn btn-primary nextBtn btn-lg pull-right">下一步</div>
                                    </div>
                                 </div>
                              </div>
                              <div class="row setup-content" id="cpnfirm-data">
                                 <div class="col-sm-12">
                                    <div class="col-md-12 p-0">
                                       <div class="row justify-content-center">
                                          <input type="submit" onclick="toIndex()" class="btn btn-primary nextBtn btn-lg pull-right" value="提交申请"/>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </form>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <!-- Footer -->
            <footer class="bg-white iq-footer">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-lg-6">
                        <ul class="list-inline mb-0">
                           <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
                           <li class="list-inline-item"><a href="terms-of-service.html">Terms of Use</a></li>
                        </ul>
                     </div>
                     <div class="col-lg-6 text-right">
                        <!-- Copyright 2020 更多模板：<a href="http://www.mycodes.net/" target="_blank">模板之家</a> All Rights Reserved. -->
                     </div>
                  </div>
               </div>
            </footer>
            <!-- Footer END -->
         </div>
      </div>
      <!-- Wrapper END -->
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script th:src="@{/js/jquery.min.js}"></script>
      <script th:src="@{/js/popper.min.js}"></script>
      <script th:src="@{/js/bootstrap.min.js}"></script>
      <!-- Appear JavaScript -->
      <script th:src="@{/js/jquery.appear.js}"></script>
      <!-- Countdown JavaScript -->
      <script th:src="@{/js/countdown.min.js}"></script>
      <!-- Counterup JavaScript -->
      <script th:src="@{/js/waypoints.min.js}"></script>
      <script th:src="@{/js/jquery.counterup.min.js}"></script>
      <!-- Wow JavaScript -->
      <script th:src="@{/js/wow.min.js}"></script>
      <!-- Apexcharts JavaScript -->
      <script th:src="@{/js/apexcharts.js}"></script>
      <!-- Slick JavaScript -->
      <script th:src="@{/js/slick.min.js}"></script>
      <!-- Select2 JavaScript -->
      <script th:src="@{/js/select2.min.js}"></script>
      <!-- Owl Carousel JavaScript -->
      <script th:src="@{/js/owl.carousel.min.js}"></script>
      <!-- Magnific Popup JavaScript -->
      <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
      <!-- Smooth Scrollbar JavaScript -->
      <script th:src="@{/js/smooth-scrollbar.js}"></script>
      <!-- lottie JavaScript -->
      <script th:src="@{/js/lottie.js}"></script>
      <!-- Chart Custom JavaScript -->
      <script th:src="@{/js/chart-custom.js}"></script>
      <!-- Custom JavaScript -->
      <script th:src="@{/js/custom.js}"></script>


      <!--      <script th:src="@{/js/vue.js}"></script>-->
      <!--      &lt;!&ndash; 引入element组件库 &ndash;&gt;-->
      <!--      <script type="module" th:src="@{/js/https_unpkg.com_element-ui_lib_index.js}"></script>-->
      <!-- import Vue before Element -->
      <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
      <!-- import JavaScript -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script th:src="@{/js/axio.js}"></script>
      <!-- fixme: 编写时不注掉会导致自动生成大括号时生成错误     -->
      <!--    <script th:inline="javascript"> let rootUrl = [[@{/}]]; </script>-->

      <script>
         // new Vue({
         //    el: "#content",
         //    data:{
         //       vol:{}
         //    },
         //    mounted(){
         //       this.getInfo();
         //    },
         //    methods: {
         //       getInfo() {
         //          // 发送ajax请求，尝试登录
         //          let url = rootUrl + `user/getInfo`;
         //          axios.post(url)
         //                  .then(response => {
         //                     let data = response.data;
         //                     if (data.code !== 0) return;
         //                     let info = data.data;
         //                     this.user = info;
         //                     console.log(this.user);
         //
         //                  })
         //                  .catch(error => {
         //                     alert(error);
         //                  });
         //       },
         //    }
         // })
      </script>

      <script type="text/javascript">
         function showImg(a) {
            var imgFile = a.files[0];
            var src = window.URL.createObjectURL(imgFile);
            document.getElementById("myImg").setAttribute("src",src);
         }
         function toIndex() {
            alert("提交成功！");
         }
      </script>
   </body>
</html>